// 样式文件
import '@assets/styles/main.scss';
import '@assets/styles/font/iconfont.scss';
// 脚本文件
// import '@components/Header'

// import '@assets/styles/reset.scss';
// import '@assets/styles/dianming.scss';

// 1. 把html文件作为组件抽离出来
// 2. 升级框架：1.装html-loader 在webpack配置html解析 yarn 2.配置 `*.html` 的声明文件
// 3. 修改入口文件 导入DianMing html组件 获取 div#app  节点。
// 4. 把点名组件 载入到  div#app 
// 5. 处理加载流程  document.addEventListener('DOMContentLoaded', () => { js代码 })

// import DianMing from '@components/dianming/dianmig.html'
// import '@assets/styles/dianming.scss';
// import RandomDrawing from '@components/dianming/RandomDrawing'
// document.addEventListener('DOMContentLoaded', () => {

//   const rd = new RandomDrawing(3)
//   rd.initListene()
// })


import DianMing2 from '@components/dianming2/dianming2.html'
import '@assets/styles/dianming2.scss';
import dianmingC2 from '@components/dianming2/dianming2'
import dianmingC3, { groupHighlightEffect } from '@components/dianming2/dianming3'

import TabsDemo from '@components/tabsdemo/tabsdemo.html'

document.addEventListener('DOMContentLoaded', async () => {



  // 获取url的hash值
  const currentHash = window.location.hash.slice(1);
  console.log(currentHash);

  // 获取 id为app div
  const appEl = document.querySelector('#app') as HTMLDivElement
  console.log(appEl);
  if (appEl) {
    // 往 div#app 里边 加入html组件 
    // appEl.innerHTML = `${DianMing}`
    // 通过不同的URL的hash值 来加载不同的html组件 追加到 div.#app
    if (currentHash === 'dianmig') {
      appEl.innerHTML = `${DianMing2}`


      const rd = new dianmingC2(3)
      rd.addEventListenerHandler()

      const rd3 = new dianmingC3()
      rd3.addEventListenerHandler()

      groupHighlightEffect()


    } else if (currentHash === 'tabsdemo') {
      appEl.innerHTML = `${TabsDemo}`
      // appEl.innerHTML = ((await import('@components/tabsdemo/tabsdemo.html')).default)
    }

  }






})


